<style>
  .account-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      :closable="false"
      :title="title"
      :rules="rules"
      @on-close="cancel"
      width="35%">
      <div style="margin-left: 20%; padding: 20px;">
        <div style="padding: 10px;">
          <div style="display: inline-block; width: 70px; text-align: right">充值姓名：</div>
          <div style="display: inline-block; margin-left: 20px;">{{row.uname}}</div>
        </div>
        <div style="padding: 10px;">
          <div style="display: inline-block; width: 70px; text-align: right">电话：</div>
          <div style="display: inline-block; margin-left: 20px;">{{row.tel}}</div>
        </div>
        <div style="padding: 10px;">
          <div style="display: inline-block; width: 70px; text-align: right">企业名称：</div>
          <div style="display: inline-block; margin-left: 20px;">{{row.company}}</div>
        </div>
      </div>
      <Form
        ref="accountFundingDrawer"
        :model="form"
        :rules="rules"
        :label-width="100"
        style="margin-left: 22%;">
        <FormItem prop="type" label="充值类型：" style="width: 300px;">
          <Select v-model="form.type" placeholder="请选择充值类型" clearable>
            <Option value="0">
              佣金
            </Option>
            <Option value="1">
              服务费
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="paytype" label="充值方式：" style="width: 300px;">
          <Select v-model="form.paytype" placeholder="请选择充值方式" clearable>
            <Option value="0">
              银行卡
            </Option>
            <Option value="1">
              微信
            </Option>
            <Option value="2">
              支付宝
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="price" label="充值金额：" style="width: 300px;">
          <Input type="text" v-model="form.price" placeholder="请输入充值金额" />
        </FormItem>
        <FormItem prop="des" label="备注：" style="width: 400px;">
          <Input type="textarea" :rows="6" v-model="form.des" placeholder="请输入备注" />
        </FormItem>
      </Form>
      <div class="account-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">取消</Button>
        <Button type="primary" @click="handleSubmit">确认充值</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'AccountFundingDrawer',
  props: {
    modalState: Boolean,
    row: null,
    typeRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '充值类型不能为空', trigger: 'change' }
        ]
      }
    },
    paytypeRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '充值方式不能为空', trigger: 'change' }
        ]
      }
    },
    priceRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '充值金额不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      title: '',
      loading: true,
      form: {
        type: '',
        paytype: '',
        price: '',
        des: ''
      }
    }
  },
  updated () {
    this.title = '账户充值'
  },
  computed: {
    rules () {
      return {
        type: this.typeRules,
        paytype: this.paytypeRules,
        price: this.priceRules
      }
    }
  },
  methods: {
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.accountFundingDrawer.validate((valid) => {
        if (valid) {
          this.$emit('account-funding-valid', {
            drawer: this.$refs['accountFundingDrawer'],
            tid: this.row.tid,
            tel: this.row.tel,
            type: this.form.type,
            paytype: this.form.paytype,
            price: this.form.price,
            des: this.form.des
          })
          // this.$refs['accountDrawer'].resetFields()
        }
      })
    },
    cancel () {
      this.$emit('on-cancel', this.$refs['accountFundingDrawer'])
    }
  }
}
</script>
